import React, { Component } from 'react'
import { addTodoToPendding ,addTodoOver,addTodonoList} from "./redux/acition"
import { connect } from "react-redux"
import './app.css'
export class App extends Component {

  render() {
    return (
      <div>
        <div className="todolist">
        <input type="text" ref="inputValue" />
        <button onClick={() => {
          var input = this.refs.inputValue.value;
          this.props.addtodo(input)
          // console.log(input);
        }}>添加</button>
        </div>
    
        <div>正在进行</div>
        <ul className="todolistul">
          {
            this.props.penddingTods.map((ele, index) => {
              return <li key={index}>
                <input type="checkbox" onClick={(e)=>{
                  e.preventDefault();
                  this.props.addyeslist(ele)
                }}/>
                <span>{ele.text}</span>
              </li>
            })
          }
        </ul>
        <div>已经完成</div>
        <ul className="todolistul">
        {
            this.props.yesingTods.map((ele, index) => {
              return <li key={index}>
                <input type="checkbox" checked onClick={()=>{
                  this.props.addnolist(ele)
                }}/>
                <span>{ele.text}</span>
              </li>
            })
          }
        </ul>
      </div>
    )
  }
}
// 来接受reducer中合并的数据 然后获取
function mapStateToProps(rootReducer) {
  return {
    // 自定义的名字  合并中 执行rducer的名字
    penddingTods: rootReducer.todoReduer.noList,
    yesingTods: rootReducer.todoReduer.yesList,
  }
}
function mapDispatchToProps(dispatch) {
  return {
    addtodo: (text) => { dispatch(addTodoToPendding(text)) },
    addyeslist: (check) => { dispatch(addTodoOver(check)) },
    addnolist: (check) => { dispatch(addTodonoList(check)) }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

